<template>
	<view class="wx-auth">
		<view class="header"><image src="../../../static/img/logo.png" mode=""></image></view>
		<view class="tabs">
			<uv-tabs
				:scrollable="false"
				:list="[{ name: '学生', role: 'student' }, { name: '企业', role: 'company' }]"
				:itemStyle="{ height: '88rpx', width: '140rpx' }"
				@click="handleSwitchRole"
			></uv-tabs>
		</view>
		<view class="form">
			<uv-form
				labelPosition="left"
				errorType="toast"
				labelWidth="50px"
				ref="form"
				:model="form"
				:rules="rules"
				:labelStyle="{ fontSize: '32rpx' }"
			>
				<uv-form-item label="账号:" prop="username" borderBottom>
					<uv-input
						v-if="form.role === 'student'"
						type="number"
						v-model="form.username"
						:placeholder="placeholder"
					></uv-input>
					<uv-input v-else v-model="form.username" :placeholder="placeholder"></uv-input>
				</uv-form-item>
				<uv-form-item label="密码:" prop="password" borderBottom>
					<uv-input v-model="form.password" password placeholder="请输入密码"></uv-input>
				</uv-form-item>
			</uv-form>
		</view>
		<!-- <view class="agreement">
			<uv-checkbox-group v-model="value" shape="circle">
				<uv-checkbox activeColor="#53c21d" :name="1">阅读并同意</uv-checkbox>
			</uv-checkbox-group>
			<text>《用户协议》</text>
			<text>《隐私政策》</text>
		</view> -->
		<view class="auth"><button @click="handleGetUserInfo">授权登录</button></view>
	</view>
</template>

<script>
import { companyLogin, studentLogin } from '@/apis/user/index.js';

export default {
	data() {
		return {
			value: [],
			placeholder: '请输入学号',
			form: {
				role: 'student', // 角色
				username: '', // 账号
				password: '' // 密码
			},
			rules: {
				username: { required: true, trigger: 'blur', message: '账号不能为空' },
				password: [
					{ required: true, trigger: 'blur', message: '密码不能为空' },
					{ min: 6, max: 12, message: '密码长度必须6~12个字符' }
				]
			}
		};
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		// 切换角色
		handleSwitchRole(value) {
			this.form.role = value.role;
			this.form.username = '';
			this.form.password = '';
			this.placeholder = '请输入学号';
			if (value.role === 'company') {
				this.placeholder = '请输入公司名称';
			}
		},
		// 登录
		handleGetUserInfo() {
			// if (this.value.length <= 0) {
			// 	uni.showToast({ title: '请同意用户协议和隐私政策', icon: 'none' });
			// 	return false;
			// }

			this.$refs['form']
				.validate()
				.then(async () => {
					let login = studentLogin;
					if (this.form.role === 'company') {
						login = companyLogin;
					}

					login(this.form).then(info => {
						if (info.code !== 200) return false;
						uni.setStorageSync('token', info.data.token);
						this.$store.dispatch('fetchUserInfo').then(res => {
							uni.navigateBack();
						});
					});
				})
				.catch(error => {
					console.log(error);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.uv-checkbox-group {
	flex: none !important;
}

.form .uv-form-item ::v-deep .uv-form-item__body {
	padding: 30rpx 0;
}

.uv-tabs ::v-deep .uv-tabs__wrapper__nav__item__text {
	font-size: 40rpx !important;
}
</style>

<style lang="scss" scoped>
.header {
	height: 300rpx;
	line-height: 450rpx;
	margin: 50rpx 0 50rpx 0;
	text-align: center;
	border-bottom: 2rpx solid #cecece;
	image {
		width: 200rpx;
		height: 200rpx;
		display: inline-block;
	}
}

.tabs {
	display: flex;
	justify-content: center;
}

.agreement {
	display: flex;
	align-items: center;
	margin-left: 52rpx;
	margin-bottom: 20rpx;
	text {
		font-size: 28rpx;
		line-height: 28rpx;
		color: #3c9cff;
	}
}

.form {
	padding: 0 30rpx;
	margin: 30rpx 0 60rpx;
}

.auth {
	width: 90%;
	margin: auto;
	button {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: #12ae85;
	}
}
</style>
